<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var data = [
    {lat: 34.05, lng: -118.24, time: 0},
    {lat: 34.02, lng: -118.49, time: 1},
    {lat: 34.02, lng: -118.40, time: 2},
    {lat: 34.15, lng: -118.14, time: 3},
    {lat: 33.99, lng: -117.97, time: 4}
    ];
    
    var coords = [];
    for (var i = 0; i < data.length; i++) 
    {
      coords.push(new google.maps.LatLng(data[i].lat, data[i].lng));
    }
    
    var myOptions = {
      zoom: 8,
      center: coords[coords.length - 1],
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
        
    var travelPath = new google.maps.Polyline({
      path: coords,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });
    
    travelPath.setMap(map);
    
    var infowindow = new google.maps.InfoWindow({})
     
    for (var j = 0; j < data.length; j++) {
      var marker = new google.maps.Marker({
        position: coords[j],
        map: map,
        title: "Time at " + data[j].time
      })
      
      addInfoWindow(infowindow, map, marker, "At " + data[j].time + " minutes");
    }
    
  }
  
  function addInfoWindow(infowindow, map, marker, content, fontColor, fontSize, fontName) {
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.content = content;
      infowindow.open(map, marker);
    });
  }
  
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
  <div>
  <br>
  <a href="/logout">Logout</a>
  </div>
</body>
</html>
  
    
    
    
    